<template>
  <div id="user">
    <!-- 搜索栏 -->
    <el-card>
      <el-input v-model="condition.username" placeholder="请输入用户名"></el-input>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="margin: 0 8px;"
        @change="selectDate">
      </el-date-picker>
      <!-- <el-input v-model="condition.phone" placeholder="手机号"></el-input>
      <el-select v-model="condition.sex" placeholder="请选择性别">
        <el-option
          v-for="item in sexOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
      <el-select v-model="condition.status" placeholder="请选择状态">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" round @click="search">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" circle @click="handleAdd" style="float: right; margin-right: 10px;"></el-button>
    </el-card>
    <!-- 用户列表 -->
    <el-card>
      <el-table
        :data="tableData"
        stripe
        border
        height="400"
        style="width: 100%">
        <el-table-column
          fixed="left"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="#"
          width="60">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          width="120">
          <template v-slot="scope">
            <el-tag
              :type="scope.row.role == 1 ? 'primary' : 'warning'"
              disable-transitions>{{ roles.find(r => r.id == scope.row.role) ? roles.find(r => r.id == scope.row.role).name : ""}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="昵称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="200">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="200">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="200">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="120">
          <template v-slot="scope">
            <el-tag
              :type="scope.row.status ? 'success' : 'danger'"
              disable-transitions>{{scope.row.status ? '正常' : '禁用'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @onConfirm="confirmDel(scope.row.id)"
            >
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
            
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 弹出框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="500px">
      <el-form label-width="80px" size="small" >
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
            <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      {{ form }}
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/common'
  import user from '@/api/user';
  import role from '@/api/role'
  export default {
    name: 'User',
    data() {
      return {
        // 分页数据
        pageNum: 1,
        pageSize: 10,
        total: 0,
        // 查询条件
        condition: {
          startTime: null,
          endTime: null
        },
        // 日期时间选择器选中值
        date: '',
        // 用户列表
        tableData: [],
        // 用户状态下拉列表
        statusOptions: [],
        roles: [],
        // 控制添加用户对话框是否显示
        dialogVisible: false,
        dialogTitle: '',
        form: {
          status: true
        }
      }
    },
    methods: {
      // 日期时间选择器选中事件
      selectDate(val) {
        console.log(val)
        this.condition.startTime = val[0]
        this.condition.endTime = val[1]
      },
      // 搜索按钮 输入查询条件后，不点击搜索按钮，直接选择页码，会有bug
      search() {
        this.pageNum = 1
        this.findUserPage()
      },
      // 改变每页显示记录数
      handleSizeChange(val) {
        this.pageSize = val
        this.pageNum = 1
        this.findUserPage()
      },
      // 改变页码
      handleCurrentChange(val) {
        this.pageNum = val
        this.findUserPage()
      },
      // 分页条件查询用户列表
      findUserPage() {
        console.log(this.condition)
        user.findPage(this.condition, this.pageNum, this.pageSize).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },
      // 获取角色列表
      getAllRole() {
        role.findAll().then(res => {
          console.log(res)
          this.roles = res.data
        })
      },
      saveUser() {
        user.saveUser(this.form).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success(this.dialogTitle + "成功")
          }
        })
      },
      // 添加按钮点击事件
      handleAdd() {
        // 重置form表单
        this.form = this.$options.data()
        this.dialogVisible = true
        this.dialogTitle = '添加用户'
      },
      // 编辑按钮点击事件
      handleEdit(row) {
        this.dialogTitle = '编辑用户'
        // 深拷贝
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogVisible = true
      },
      // 确认删除点击事件
      confirmDel(row) {
        // user.deleteUser(row).then(res => {
        //   if (res.code == 200) {
        //     this.$message.success("操作成功")
        //   } else {
        //     this.$message.error("操作失败")
        //   }
        // })
        console.log(row)
      }
    },
    mounted() {
      // 在页面加载时查询用户列表
      this.findUserPage()
      // 获取角色列表
      this.getAllRole()
      // 加载用户状态选择器数据
      common.getUserStatus().then(res => {
        this.statusOptions = res.data;
        console.log(res);
      })
    },
  }
</script>

<style lang="scss" scoped>
  .el-card {
    .el-input {
      width: 160px;
      margin-right: 15px;
    }
    .el-select {
      width: 160px;
      margin-right: 20px;
    }
  }
</style>